<template>
  <!-- ----------------------------活动成长---------------------------------- -->
  <div class="descriptions__title">活动成长</div>

  <el-row>
    <el-col :span="12">
      <el-card class="box-card" style="margin-right: 20px">
        <div class="activity">
          <img src="../../assets/HD.jpg" alt="" />
          <div class="activityinfo">
            <span class="number">活动</span>
            <span class="act">{{ activityNote?.count }}</span>
            <span class="number">次</span>
            <!-- <span class="number">次</span> -->
          </div>
        </div>
        <div class="semester">
          <span>本学期</span>
          <span class="act">{{ activityNote?.newCount }}</span>
          <span class="number">次</span>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple"></div>
    </el-col>
    <el-col :span="12">
      <el-card class="box-card">
        <div class="activity">
          <img src="../../assets/JF.jpg" alt="" />
          <div class="activityinfo">
            <span class="number">积分</span>
            <span class="act">{{ activityNote?.credits }}</span>
            <span class="number">分</span>
            <!-- <span class="number">{{ activityNote?.credits }}(分)</span> -->
          </div>
        </div>
        <div class="semester">
          <span>本学期</span>
          <span>{{ activityNote?.newCredits }}</span>
          <span>分</span>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple-light"></div>
    </el-col>
  </el-row>

  <el-card style="margin-top: 20px; min-height: 200px">
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="activityCredits" label="活动积分" />
      <el-table-column prop="activityName" label="活动时间" width="300" />
      <el-table-column prop="activityTime" label="活动名称" width="300" />
      <el-table-column prop="activityType" label="活动类型" width="300" />
    </el-table>
  </el-card>
  <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="tableDataPage.pageSize"
    :total="tableDataPage.total"> </el-pagination>

  <!-- ------------------------------深度辅导-------------------------- -->
  <div class="descriptions__title">深度辅导</div>

  <el-row>
    <el-col :span="12" style="margin-top: 20px">
      <el-card class="box-card" style="margin-right: 20px; height: 200px">
        <div class="abc">
          <img src="../../assets/12.jpg" alt="" />
          <div class="activityinfo">
            <span class="number">深度辅导</span>
            <span class="act">{{ deepCoachNote?.count }}</span>
            <span class="number">（次）</span>
            <!-- <p class="number">8次</p> -->
          </div>
        </div>
      </el-card>
      <div class="grid-content ep-bg-purple"></div>
      <!-- <div class="grid-content ep-bg-purple" /> -->
    </el-col>

    <el-col :span="12" style="margin-top: 20px">
      <el-card class="box-card" style="height: 200px">
        <div class="abc">
          <img src="../../assets/1111.jpg" alt="" />
          <div class="activityinfo">
            <span class="number">本学期深度辅导</span>
            <!-- <span class="number">3次</span> -->
            <span class="act">{{ deepCoachNote?.newCount }}</span>
            <span class="number">（次）</span>
          </div>
        </div>
      </el-card>
      <!-- <div class="grid-content ep-bg-purple-light" /> -->
      <div class="grid-content ep-bg-purple-light"></div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24" style="margin-top: 20px; min-height: 200px">
      <el-card class="box-card" style="min-height: 200px">
        <el-table :data="tableDataDeep" border stripe style="width: 100%">
          <el-table-column prop="coachTime" label="辅导时间" width="180" />
          <el-table-column prop="coachPerson" label="辅导人" width="180" />
          <el-table-column prop="coachDetails" label="辅导详情" />
        </el-table>
      </el-card>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChangeInfo" :page-size="info.pageSize"
        :total="info.total"> </el-pagination>
      <!-- <div class="grid-content ep-bg-purple-light" /> -->
      <div class="grid-content ep-bg-purple-light"></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="16" :offset="4" style="margin-top: 20px">
      <el-card class="box-card">
        <!-- <h>柱状图</h> -->
        <div style="text-align: center; font-weight: bold">
          辅导问题统计柱状图
        </div>
        <div id="myChart"></div>
      </el-card>
      <!-- <div class="grid-content ep-bg-purple" /> -->
      <div class="grid-content ep-bg-purple"></div>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from 'vue'
import * as echarts from 'echarts'
import { useRoute } from 'vue-router'
import { getActivity, getStudentInfo, getdeepCoach } from '@/api/student'
import axios from 'axios'

const route = useRoute()

const tableData = ref()
const tableDataDeep = ref()

const tableDataPage = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
})

onMounted(() => {
})
const info = ref({
  pageNum: 1,
  pageSize: 5,
  type: 0,
})
//
// 画图表
function drawChart() {
  const chartContainer = document.getElementById('myChart')
  const chart = echarts.init(chartContainer)
  chart.setOption({
    title: {
      test: 'test',
    },
    xAxis: {
      type: 'category',
      data: deepCoachNote.value.X,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: deepCoachNote.value.Y,
        type: 'bar',
      },
    ],
  })
}
//
getStudentInfo(route.params.id).then((res) => {
  const result = res.data.data
  tableDataPage.value.classNum = result.classNum
  tableDataPage.value.major = result.major
  tableDataPage.value.stuName = result.stuName
  tableDataPage.value.stuId = result.stuId
  info.value.classNum = result.classNum
  info.value.major = result.major
  info.value.stuName = result.stuName
  info.value.stuId = result.stuId
  activityInfo()
  deepCoachInfo()
})
//《--------------------------成长活动---------------------------》
const activityNote = ref({
  newCount: 0,
  credits: 0,
  count: 0,
  newCredits: 0,
})
const activity = ref({})
const handleCurrentChange = (val) => {
  tableDataPage.value.pageNum = val
  activityInfo()
}
const handleCurrentChangeInfo = (val) => {
  info.value.pageNum = val
  deepCoachInfo()
}
const activityInfo = () => {
  getActivity({ ...tableDataPage.value }).then((res) => {
    // console.log(res.data.data)
    tableData.value = res.data.data.data
    tableDataPage.value.pageNum = res.data.data.page
    tableDataPage.value.total = res.data.data.total
    console.log(res.data.data.note)
    activityNote.value = res.data.data.note
  })
}
// 《----------------------------深度辅导------------------------------》
const deepCoachNote = ref({
  newCount: 0,
  count: 0,
})
const deepCoach = ref({})
function deepCoachInfo() {
  getdeepCoach({ ...info.value }).then((res) => {
    console.log(res.data.data)
    tableDataDeep.value = res.data.data.data
    deepCoachNote.value = res.data.data.note
    info.value.pageNum = res.data.data.page
    info.value.total = res.data.data.total
    drawChart()
  })
}
</script>

<sstyle lang="scss" scoped>
.activity {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;

  img {
    margin-right: 40px;
    width: 100px;
    height: 100px;
    border-radius: 30%;
  }
}

.activityinfo {
  .act {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .number {
    color: #999999;
  }
}

.semester {
  margin-left: 220px;
}

.abc {
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  img {
    margin-right: 40px;
    width: 100px;
    height: 100px;
    border-radius: 30%;
  }
}

#myChart {
  margin: 0 auto;
  height: 390px;
}
</sstyle>
